﻿<%@ Page Title="" Language="C#" MasterPageFile="AdminSite.Master" AutoEventWireup="true"
    CodeBehind="ArticleItem.aspx.cs" Inherits="phudieuhungthinh.Admin.ArticleItem" %>

<%@ Register TagPrefix="uc" TagName="FileBrowser" Src="~/Controls/FileBrowser.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="/Styles/control-style.css" rel="stylesheet" type="text/css" />
    <link href="/third-party/jquery-ui-1.10.3/themes/base/minified/jquery-ui.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/third-party/tiny_mce/jquery.tinymce.js"></script>
    <script type="text/javascript" src="/third-party/tiny_mce/loadTinyMce.js"></script>
    <script type="text/javascript" src="/Scripts/vm/handler.js"></script>
    <style type="text/css">
        .input
        {
            margin: 0px 0 10px 0;
        }
        label
        {
            width: 100px;
            display: block;
        }
        #upload-button
        {
            float: left;
            margin-top: 20px;
        }
        #image-upload
        {
            padding-top: 20px;
            height: 200px;
        }
        .btn-submit
        {
            background-color: #ccc;
            color: black;
            font-family: 'Oswald';
            font-size: 20px;
            text-decoration: none;
            cursor: pointer;
            border: none;
        }
        #display-image
        {
            height: 200px;
            border: solid 1px blue;
            margin-top: 20px;
            float: left;
            width: 641px;
        }
        #product-left
        {
            height: 500px;
            width: 300px;
            float: left;
        }
        .error-message
        {
            height: 20px;
            width: 200px;
            color: Blue;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            loadTinyMce();
        });

        function acceptDialog(file) {
            $('#photo').attr('src', '/images/articles/thumb/' + file);
        }

        $(document).ready(function () {
            $('.button.upload a').click(function () {
                setupUpload('#file-explorer', 'articles');
                $("#dialog-upload").dialog("open");
            });

            var dataHandler = new handler(location.pathname);
            function articleVM() {
                var self = this;
                var id = $.QueryString["id"];
                if (typeof id != 'undefined') {
                    var a = dataHandler.article.get(id);
                    self.id = a.ID;
                    self.title = ko.observable(a.Title);
                    self.sapo = ko.observable(a.ArticleSapo);
                    self.content = ko.observable(a.ArticleContent);
                    $('#photo').attr('src', '/images/articles/thumb/' + a.Thumb);
                } else {
                    self.id = 0;
                    self.title = ko.observable();
                    self.sapo = ko.observable();
                    self.content = ko.observable();
                }

                self.save = function () {
                    var model = {
                        ID: self.id,
                        Thumb: $('#photo').prop('src'),
                        Title: $('#text-title').val(),
                        ArticleSapo: $('#text-sapo').tinymce().getContent(),
                        ArticleContent: $('#text-content').tinymce().getContent()
                    };
                    $.ajax({
                        type: "POST",
                        url: location.pathname + '/Save',
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({ model: model }),
                        success: function () {
                            $('.error-message').remove();
                            $('#s-message').append("<span class='error-message'>Lưu thành công.</span>");
                            //Auto hide after 4 seconds.
                            $('.error-message').delay(4000).fadeOut('slow');
                        },
                        error: function (xmlHttpRequest) {
                            var ex = eval("(" + xmlHttpRequest.responseText + ")");
                            alert("failed\nDetail: " + ex.Message);
                        }
                    });
                };
            }
            ko.applyBindings(new articleVM());
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="content">
        <fieldset>
            <legend>Tạo tin mới (Create article)</legend>
            <div>
                <div>
                    <label>
                        Hình ảnh (Photo):</label>
                </div>
                <div id="image-upload">
                    <img id="photo" src="" height="150px" width="150px" style="float: left" alt="" />
                    <div class="button upload">
                        <a href="javascript:void(0)">Upload Photo</a>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <div>
                <div>
                    Tiêu đề (Title):
                </div>
                <div style="margin-top: 20px">
                    <input data-bind="value: title, valueUpdate: 'afterkeydown'" type="text" id="text-title"
                        style="margin-top: 10px; width: 400px;" />
                </div>
            </div>
            <div>
                <div>
                    Trích dẫn (Sapo):
                </div>
                <div style="margin-top: 20px">
                    <textarea id="text-sapo" style="height: 200px; width: 900px" class="tinymce" rows="3"
                        cols="2" data-bind="value: sapo"></textarea>
                </div>
            </div>
            <div>
                <div>
                    Nội dung (Content):
                </div>
                <div style="margin-top: 20px">
                    <textarea id="text-content" style="height: 600px; width: 900px" class="tinymce" rows="10"
                        cols="2" data-bind="value: content"></textarea>
                </div>
            </div>
            <div class="button save" style="margin-top: 20px">
                <a href="javascript:void(0)" data-bind="click: save">Lưu</a>
            </div>
            <span id="s-message"></span>
        </fieldset>
    </div>
    <uc:FileBrowser ID="fileBrowser" runat="server" />
</asp:Content>
